<template>
  <Modal
    :visible="visible"
    :title="`Policy Details - ${nftIndex}`"
    :centered="true"
    width="375px"
    :footer="false"
    :closeIcon="renderCloseIcon()"
    @cancel="$emit('closeModal')"
  >
    <div class="nft-details" v-show="policyDetailsShow">
      <div class="nft-details-items">
        <div class="nft-details-key">Protected Protocol</div>
        <div class="nft-details-v">{{ poolName }}</div>
      </div>
      <div class="nft-details-items">
        <div class="nft-details-key">Coverage</div>
        <div class="nft-details-v">{{ coverage / 10 ** 18 }} USDT</div>
      </div>

      <div class="nft-details-items">
        <div class="nft-details-key">Deposit</div>
        <div class="nft-details-v">10 USDT</div>
      </div>

      <div class="nft-details-items">
        <div class="nft-details-key">Entered At</div>
        <div class="nft-details-v">{{ epochTime() }}</div>
      </div>

      <div class="nft-details-items">
        <div class="nft-details-key">Effective Until</div>
        <div class="nft-details-v">{{ epochUntilTime() }}</div>
      </div>

      <div class="nft-details-items">
        <div class="nft-details-key">Status</div>
        <div class="nft-details-v">{{ isClaimed }}</div>
      </div>
    </div>
    <div class="handle-buttons-container" v-show="policyDetailsShow">
      <Button
        class="handle-button-ant"
        type="primary"
        @click="applyForClaim()"
        :disabled="claimDisabled || effectiveUntilDisabled"
        >Claim</Button
      >
      <Button
        class="handle-button-ant"
        type="primary"
        @click="doSettle()"
        :disabled="!effectiveUntilDisabled"
        >Settle</Button
      >
    </div>
    <div class="nft-details claim-sheet" v-show="claimSheetShow">
      <div class="nft-details-items">
        <div class="nft-details-key">The hash of your paticipation</div>
        <div class="nft-details-v">
          <input type="text" />
        </div>
      </div>

      <div class="nft-details-items">
        <div class="nft-details-key">The hash of Attack</div>
        <div class="nft-details-v">
          <input type="text" />
        </div>
      </div>

      <div class="nft-details-items">
        <div class="nft-details-key">Other description</div>
        <div class="nft-details-v">
          <textarea></textarea>
        </div>
      </div>

      <div class="nft-details-items">
        <div class="nft-details-key">Contact</div>
        <div class="nft-details-v">
          <input type="text" />
        </div>
      </div>
    </div>
    <div class="handle-buttons-container" v-show="claimSheetShow">
      <Button
        class="handle-button-ant"
        type="primary"
        @click="doApplyForClaim()"
        >Apply</Button
      >
      <Button class="handle-button-ant" type="primary" @click="backToDetails()"
        >Back</Button
      >
    </div>
  </Modal>
</template>

<script>
import { Modal, Button } from "ant-design-vue";
import moment from "moment";
import store from "../../vuex/store";
import CloseIcon from "@/assets/close-icon.svg";

export default {
  components: {
    Modal,
    Button,
  },
  props: [
    "content",
    "visible",
    "nftIndex",
    "coverage",
    "isClaimed",
    "poolAddress",
    "poolName",
    "duration",
    "claimDisabled",
  ],
  data() {
    return {
      policyDetailsShow: true,
      claimSheetShow: false,
    };
  },
  computed: {
    effectiveUntilDisabled() {
      return (
        (store.state.web3Data.epochTime || Date.parse(new Date())) +
          this.duration * 86400 * 1000 <
        Date.parse(new Date())
      );
    },
  },
  methods: {
    renderCloseIcon() {
      return <img src={CloseIcon} alt="" />;
    },
    epochTime() {
      let epochTime = moment(store.state.web3Data.epochTime).format(
        "YYYY-MM-DD"
      );
      return epochTime;
    },
    epochUntilTime() {
      let epochUntilTime = moment(
        store.state.web3Data.epochTime + this.duration * 86400 * 1000
      ).format("YYYY-MM-DD");
      return epochUntilTime;
    },
    applyForClaim() {
      this.policyDetailsShow = false;
      this.claimSheetShow = true;
    },
    backToDetails() {
      this.policyDetailsShow = true;
      this.claimSheetShow = false;
    },
    async doApplyForClaim() {
      let poolAddress = this.poolAddress;
      let policyId = this.nftIndex;
      await store.dispatch("applyForClaim", { poolAddress, policyId });
    },
    async doSettle(item) {
      let poolAddress = this.poolAddress;
      let policyId = this.nftIndex;
      console.log(poolAddress, policyId, typeof poolAddress, typeof policyId);
      await store.dispatch("settlePolicy", { poolAddress, policyId });
      console.log(item);
    },
  },
};
</script>

<style lang='less' scoped>
</style>